<div class="row">
    <div class="col-sm-12" [hidden]="!fileInfo.status">
        <div class="row">
            <!--图标/缩略图-->
            <div class="col-sm-2 remove-padding-left">
                <div [hidden]="fileInfo.icon">
                    <!--TODO做图片预览-->
                    <a  (click)="lookOver(remoteUrl)" href="javascript:" >
                        <img class="bg-gray" [attr.src]="remoteSmallUrl" style="max-height:80px;max-width:100px" />
                    </a>
                </div>
                <div [hidden]="!fileInfo.icon">
                    <a [attr.href]="remoteDownUrl" target="_blank">
                        <i [ngClass]="fileInfo.icon" style="font-size:35px;line-height: 35px;"></i>
                    </a>
                </div>
            </div>
            <!--名称，大小-->
            <div class="col-sm-6">
                <a [hidden]="fileInfo.icon" class="text-muted"   (click)="lookOver(remoteUrl)" href="javascript:" >{{fileInfo.fileName}}</a>
                <a [hidden]="!fileInfo.icon" class="text-muted" target="_blank" [attr.href]="remoteDownUrl">{{fileInfo.fileName}}</a>
                <br />{{fileInfo.size}}
            </div>
            <!--操作-->
            <div class="col-sm-4" [hidden]="!fileInfo.status">
                <button type="button" class="btn btn-xs2 btn-primary mr-1" *ngIf="permission && fileInfo.id && config.aLterFileName" (click)="reNameFile(fileInfo.id)">
                    <span class="bi bi-eraser"></span>
                </button>
                <button type="button" class="btn btn-xs2 btn-primary mr-1" *ngIf="permission" (click)="update(fileInfo.id)">
                    <span class="fa fa-edit"></span>
                </button>
                <button type="button" class="btn btn-xs2 btn-warning mr-1" *ngIf="permission" (click)="delete(fileInfo.id)">
                    <span class="fa ion-close"></span>
                </button>
                &nbsp;
                <i class="fa fa-question-circle" style="color:#ccc" [tooltip]="config.description" placement="top"></i>
            </div>
        </div>
    </div>
    <div class="col-sm-12" [hidden]="fileInfo.status">
        <div class="row">
            <div class="col-sm-2">
                <div class="btn btn-sm btn-primary btn-file text-right mr-1" [ngClass]="{'disabled':!permission}">
                    <i class="fa fa-folder-open"></i>
                    <span class="hidden-xs">{{'Upload' | localize}}</span>
                    <input type="file"  (change)="fileChangeEvent($event)" [disabled]="!permission " />
                </div>

                <button type="button" class="btn btn-sm btn-primary mr-1" *ngIf="permission" (click)="pickupFile()">
                    <span class="fa bi-folder"></span>
                </button>
            </div>
            <div class="col-sm-8">
                <div *ngIf="showProgressBar">
                    <div class="progress progress-xs col-xs-9">
                        <div class="progress-bar progress-bar-primary" [ngStyle]="{'width': uploadProgress +'%'}"></div>
                    </div>
                    <span class="badge bg-light-blue col-xs-2">{{uploadProgress}}%</span>
                </div>
                <i class="fa fa-question-circle" style="color:#ccc" [tooltip]="config.description" placement="top"></i>
            </div>
        </div>
    </div>
</div>

